<template>
	<view class="lyric" v-show="isLyricShow" >
		<scroll-view  class="lyric-scroll" scroll-y :scroll-top="scrollTop" scroll-with-animation="true"
		show-scrollbar="false" @tap="isShow">
		    <view class="lyric-panel u-f-ajc">
				<block v-for="(item,index) in lrcList" :key="index">
					<view style="min-height: 64upx;max-height:90upx;max-width: 600upx; text-align: center;"
					:class="index==nowLyricIndex?'hightlight-lyric': '' ">
						{{item.lrc}}
					</view>
				</block>
		    </view>
		</scroll-view>
	</view>
</template>

<script>
	let lyricHeight = 0;
	export default {
		props:{
			isLyricShow: {
			  type: Boolean,
			  value: false,
			},
			lyric: String,
		},
		data() {
			return {
				lrcList: [],
				nowLyricIndex: 0, // 当前选中的歌词的索引
				scrollTop: 0, // 滚动条滚动的高度
			}
		},
		watch:{
			lyric:function (lrc) {
			    if(lrc == '纯音乐,请欣赏'){
					this.lrcList=[{
						lrc,
						time: 0,
					}],
					this.nowLyricIndex= -1;
			    }else {
					this._parseLyric(lrc)
			    }
			},
		},
		created() {
			 // 750upx
			uni.getSystemInfo({
				success(res) {
				  // console.log(res)
				  // 求出1upx的大小
				  lyricHeight = res.screenWidth / 750 * 64
				},
			})
			/* console.log(this.lyric) */		
		},
		methods: {
			update(currentTime) {
			    /* console.log(currentTime) */
				/* console.log(this.lrcList) */
			    let lrcList = this.lrcList
			    if (lrcList.length == 0) {
			        return
			      }
			    if (currentTime > lrcList[lrcList.length - 1].time) {
			        if (this.nowLyricIndex != -1) {
						
			            this.nowLyricIndex= -1,
			            this.scrollTop=lrcList.length * lyricHeight
			    
			        }
			      }
			    for (let i = 0, len = lrcList.length; i < len; i++) {
			        if (currentTime <= lrcList[i].time) {
			            this.nowLyricIndex= i - 1,
			            this.scrollTop= (i - 1) * lyricHeight
			          break
			        }
			    }
			},
			_parseLyric(sLyric) {
				let line = sLyric.split('\n')
				  // console.log(line)
				let _lrcList = []
				line.forEach((elem) => {
					let time = elem.match(/\[(\d{2,}):(\d{2})(?:\.(\d{2,3}))?]/g)
					if (time != null) {
						let lrc = elem.split(time)[1]
						let timeReg = time[0].match(/(\d{2,}):(\d{2})(?:\.(\d{2,3}))?/)
						// console.log(timeReg)
						// 把时间转换为秒
						let time2Seconds = parseInt(timeReg[1]) * 60 + parseInt(timeReg[2]) + parseInt(timeReg[3]) / 1000
						_lrcList.push({
						lrc,
						time: time2Seconds,
						})
					}
				})
				this.lrcList= _lrcList
			},
			//歌词的显示方法
			isShow(){
				this.$emit('isLyricShow',);
			}
		}
	}
</script>

<style lang="less" scoped>
	.lyric{
		position: absolute;
		top:0upx;
		left:10upx;
		right:10upx;
		bottom: 25%;
		z-index: 6;
		.lyric-scroll {
			width: 100%;
			height: 100%;
			color: #FFFFFF;
			font-size: 36upx;
			font-weight: bold;
		   .lyric-panel {
				position: relative;
				top: 50%;
				flex-direction: column;
				.hightlight-lyric {
					color: red;
				}
		    }  
		}
	}
</style>
